import { Button, Card, Form, Icon, Input, Upload } from 'antd';
import React, { Component } from 'react';

import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
import { connect } from 'dva';
import { Link, router } from 'umi';
import { formItemLayout } from '@/common/layout/form';
import { singlePageFormLayout } from '../../../../common/layout/form';
import { Loading } from '@/models/connect';

const FormItem = Form.Item;
const { TextArea } = Input;

interface FormBasicFormProps extends FormComponentProps {
  loading?: boolean;
  dispatch: Dispatch<any>;
}

class FormBasicForm extends Component<FormBasicFormProps> {
  handleSubmit = (e: React.FormEvent) => {
    const { dispatch, form } = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        dispatch({
          type: 'productAndFormBasicForm/submitRegularForm',
          payload: values,
        });
      }
    });
  };

  normFile = (e: { fileList: any }) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  onSubmit = () => {
    const { form, dispatch } = this.props;
    const { validateFields } = form;
    validateFields((err: any, values: any) => {
      if (!err && dispatch) {
        dispatch({
          type: 'brand/add',
          payload: values,
          callback: () => {
            router.push({
              pathname: '/product/brand',
            });
          },
        });
      }
    });
  };

  reset = () => {
    this.props.form.resetFields();
  };

  render() {
    const {
      form: { getFieldDecorator },
      loading,
    } = this.props;

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };
    return (
      <Card
        title={
          <div>
            <Icon type="plus-square" />
            <span style={{ marginLeft: '5px' }}>添加品牌</span>
          </div>
        }
        extra={
          <Link to="/product/brand">
            <Button>返回</Button>
          </Link>
        }
        style={{
          maxWidth: '750px',
          margin: 'auto',
        }}
        bordered
      >
        <Form layout="horizontal" style={singlePageFormLayout} onSubmit={this.handleSubmit}>
          <FormItem {...formItemLayout} label="品牌名称">
            {getFieldDecorator('name', {
              rules: [
                {
                  required: true,
                  message: '请输入品牌名称',
                },
              ],
            })(<Input />)}
          </FormItem>
          <FormItem {...formItemLayout} label="品牌首字母">
            {getFieldDecorator('firstLetter')(<Input />)}
          </FormItem>
          {/* <FormItem {...formItemLayout} label="品牌LOGO" help="只能上传jpg/png文件，且不超过10MB">
            {getFieldDecorator('logo', {
              valuePropName: 'fileList',
              getValueFromEvent: this.normFile,
            })(
              <Upload name="logo" listType="picture">
                <Button type="primary">点击上传</Button>
              </Upload>,
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="品牌专区大图"
            help="只能上传jpg/png文件，且不超过10MB"
          >
            {getFieldDecorator('zonePic', {
              valuePropName: 'fileList',
              getValueFromEvent: this.normFile,
            })(
              <Upload name="zonePic" listType="picture">
                <Button type="primary">点击上传</Button>
              </Upload>,
            )}
          </FormItem> */}
          {/* <FormItem {...formItemLayout} label="品牌故事">
            {getFieldDecorator('brandStory')(<TextArea />)}
          </FormItem> */}
          <FormItem {...formItemLayout} label="排序">
            {getFieldDecorator('sort', {
              initialValue: 0,
            })(<Input />)}
          </FormItem>
          <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
            <Button type="primary" onClick={this.onSubmit} loading={loading}>
              提交
            </Button>
            <Button onClick={this.reset} style={{ marginLeft: 8 }}>
              重置
            </Button>
          </FormItem>
        </Form>
      </Card>
    );
  }
}

const mapStateToProps = ({ loading }: { loading: Loading }) => ({
  loading: loading.models.brand,
});

export default Form.create<FormBasicFormProps>()(connect(mapStateToProps)(FormBasicForm));
